<!--
 * @Descripttion: 网站入口-应用服务
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { ApplicationImgEnum, CommonImgEnum } from '/@/enums/imageEnum'
</script>

<template>
  <div class="application">
    <div class="ysys">
      <img class="ysys-bg" :src="ApplicationImgEnum.bg" />
      <img class="ysys-img" :src="ApplicationImgEnum.ysys" />
      <div class="ysys-info common-info">
        <div class="common-info-title">营销平台</div>
        <div class="common-info-desc">云海链数字化营销平台是面向医药和器械行业的全栈式数字营销解决方案，融合医生画像、患者触达、学术传播与收益管理四大核心能力。平台依托全国实名医生数据体系，支持企业实现精准医生招募、内容智能推荐、患者全生命周期管理，并构建医生激励与教育闭环。通过数字化、可追溯、合规的运营方式，云海链赋能医药企业在学术推广、市场覆盖与医患互动中实现高效增长与价值共建。</div>
        <div class="common-info-try">
          <span class="text">前往试用</span>
          <img class="arrow" :src="CommonImgEnum.searchArrow" />
        </div>
      </div>
    </div>
    <div class="nutrition">
      <img class="nutrition-img" :src="ApplicationImgEnum.nutrition" />
      <div class="nutrition-info common-info">
        <div class="common-info-title">营养健康管理平台</div>
        <div class="common-info-desc">集患者信息管理、营养评估、方案制定、效果监测、仓储管理于一体。可对患者进行营养风险筛查与评估；依据评估结果生成个性化营养方案，涵盖肠内/外营养支持等；跟踪患者营养指标变化，动态调整方案。提升院内营养管理效率与精准度；助力医院营养学科建设，推动临床营养服务专业化、规范化发展。</div>
        <div class="common-info-try">
          <span class="text">前往试用</span>
          <img class="arrow" :src="CommonImgEnum.searchArrow" />
        </div>
      </div>
    </div>
    <div class="microbial">
      <img class="microbial-img" :src="ApplicationImgEnum.microbial" />
      <div class="microbial-info common-info">
        <div class="common-info-title">菌群数字资产银行</div>
        <div class="common-info-desc">菌群数字资产银行是一个融合菌群采集、存储与数据交易的综合服务平台，围绕菌群资源的标准化管理、检测溯源与数据资产运营等关键能力，构建科研与产业协同发展生态。平台通过统一的系统架构支持样本登记、身份绑定、检测记录、数据发布与积分交易，助力微生态研究成果落地转化，推动健康产业高质量发展。</div>
        <div class="common-info-try">
          <span class="text">前往试用</span>
          <img class="arrow" :src="CommonImgEnum.searchArrow" />
        </div>
      </div>
    </div>
    <div class="merak">
      <img class="merak-img" :src="ApplicationImgEnum.merak" />
      <div class="merak-info common-info">
        <div class="common-info-title">可视化平台</div>
        <div class="common-info-desc">帮助企业快速搭建数据看板的可视化平台，帮助企业快速分析数据并洞察业务趋势，从而实现业务的诊断和优化。支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，让每一位用户都能使用可视化平台轻松发掘数据价值，获取深度洞察力。</div>
        <div class="common-info-try">
          <span class="text">前往试用</span>
          <img class="arrow" :src="CommonImgEnum.searchArrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .application {
    position: relative;
    margin-top: -60px;
  }

  .ysys {
    position: relative;

    .ysys-bg {
      width: 100%;
    }

    .ysys-img {
      position: absolute;
      z-index: 1;
      top: 110px;
      right: 159px;
      width: 675px;
    }

    .ysys-info {
      top: 160px;
      left: 150px;
    }
  }

  .nutrition {
    position: relative;
    height: 640px;
    background: #fff;

    .nutrition-img {
      position: absolute;
      z-index: 1;
      top: 88px;
      left: 150px;
      width: 738px;
    }

    .nutrition-info {
      top: 189px;
      right: 194px;
    }
  }

  .microbial {
    position: relative;
    height: 640px;
    background: #e9f0ff;

    .microbial-img {
      position: absolute;
      z-index: 1;
      top: 88px;
      right: 104px;
      width: 730px;
    }

    .microbial-info {
      top: 189px;
      left: 150px;
    }
  }

  .merak {
    position: relative;
    height: 640px;
    background: #fff;

    .merak-img {
      position: absolute;
      z-index: 1;
      top: 73px;
      left: 117px;
      width: 754px;
    }

    .merak-info {
      top: 202px;
      right: 194px;
    }
  }

  .common-info {
    position: absolute;
    z-index: 2;

    .common-info-title {
      display: inline-block;
      height: 48px;
      line-height: 48px;
      font-size: 48px;
      font-weight: 600;
      color: #1d2129;
    }

    .common-info-desc {
      width: 720px;
      margin-top: 24px;
      text-align: justified;
      line-height: 26px;
      font-size: 18px;
      color: #4e5969;
    }

    .common-info-try {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 154px;
      height: 55px;
      margin-top: 32px;
      border-radius: 30px;
      background: linear-gradient(270deg, #39bffc 0%, #246af3 94.05%);
      cursor: pointer;

      .text {
        width: 72px;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }

      .arrow {
        width: 22px;
        height: 22px;
        margin-left: 8px;
      }
    }
  }
</style>
